<template>
  <div id="app">
    <!-- 左侧导航栏 -->
    <div class="pull-left" :class="isCollapse?'nav-collapse':'nav'">
      <el-menu :default-active="activeMenu" class="nav" :collapse="isCollapse" unique-opened>
        <img :class="isCollapse?'logo-collapse':'logo'" src="./assets/logo.png" alt="" @click="to('/')">
        <el-menu-item index="/index" @click="to('/index')">
          <i class="iconfont iconhomepage"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <menu-item :menu="item" :key="item.id" v-for="item in menu"/>
      </el-menu>
    </div>

    <!-- 主要内容区 -->
    <div :class="isCollapse?'main-collapse':'main'">
      <!-- 顶部栏 -->
      <div :class="isCollapse?'top-bar-collapse':'top-bar'">
        <el-header>
          <div class="left">
            <span @click="isCollapse = !isCollapse">
              <i class="el-icon-s-fold" v-if="!isCollapse"></i>
              <i class="el-icon-s-unfold" v-else></i>
            </span>
          </div>
          <div class="right">
            <!-- 消息提醒 -->
            <div class="mail">
              <el-badge :value="count" :max="99" class="item">
                <i class="el-icon-message" @click="showMailDialog"></i>
              </el-badge>
            </div>

            <!-- 用户头像和下拉菜单 -->
            <div class="icon">
              <el-avatar :src="icon" v-if="icon"></el-avatar>
              <el-avatar v-else> {{ name }}</el-avatar>
            </div>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link name">
                {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="setting">
                  <span style="display:block;">个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item command="change">
                  <span style="display:block;">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                  <span style="display:block;">注销</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
      </div>

      <!-- 主体内容区 -->
      <div class="router">
        <div class="breadcrumb">
          <breadcrumb/>
        </div>
        <transition name="fade-transform" mode="out-in">
          <router-view/>
        </transition>
      </div>
    </div>

    <!-- 消息弹窗 -->
    <div class="dialog">
      <el-dialog :visible.sync="dialogVisible" @closed="handleClose" title="消息" :fullscreen="true">
        <message :change="change"></message>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入相关组件和工具函数
import store from './store'
import Message from './components/Message'
import MenuItem from './components/MenuItems'
import {logout} from "./api/login";
import {removeToken} from "./utils/auth";
import Breadcrumb from '@/components/Breadcrumb'

export default {
  data() {
    return {
      change: 0,
      isCollapse: false,
      dialogVisible: false
    }
  },
  components: {
    MenuItem, Breadcrumb, Message
  },
  methods: {
    // 显示消息弹窗
    showMailDialog() {
      this.change = 1
      this.dialogVisible = true
    },
    // 关闭消息弹窗
    handleClose() {
      this.change = 0
      this.dialogVisible = false
    },
    // 跳转到指定路由
    to(url) {
      this.$router.push(url).catch(err => {
        err
      })
    },
    // 处理下拉菜单的选项点击事件
    handleCommand(command) {
      if (command === 'logout') {
        this.logout()
      } else if (command === 'setting') {
        this.to('/personal/info')
      } else if (command === 'change') {
        this.to('/personal/change_password')
      }
    },
    // 注销登录
    async logout() {
      await logout()
      await removeToken()
      window.location.href = process.env.VUE_APP_SSO
    }
  },
  computed: {
    activeMenu() {
      const route = this.$route
      const {path} = route
      return path
    },
    count() {
      return store.state.countUnread
    },
    menu() {
      return store.state.menu
    },
    name() {
      return store.state.userName
    },
    icon() {
      return store.state.userIcon
    }
  }
}
</script>

<style>
/* 样式省略，此处为组件样式定义 */
</style>
